import React from 'react';
import * as echarts from 'echarts';
import { useEffect } from 'react';
// 导入数据类型
import { LinedataType } from '@/types/layout'
type Props = {
    linedata: LinedataType, // 接收的kdata 数据类型
    id: string, // 盒子id 属性
    w?: string,  // 盒子的宽度属性
    h?: string  // 盒子的高度属性
}

export default function Kechart({ linedata, id, w, h }: Props) {
    // useEffect 执行时间: 等页面dom 加载或更新完才触发
    useEffect(() => {
        let k_box = document.querySelector('#' + id) as HTMLElement
        var myChart = echarts.init(k_box);
        window.addEventListener('resize', function () {
            // console.log('resize222');
            myChart.resize();
        });
        myChart.setOption({
            title: {
                text: '每天学员出勤率'
            },
            xAxis: {
                type: 'category',
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                data: linedata.map(item => item.x)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    // data: [150, 230, 224, 218, 135, 147, 260],
                    data: linedata.map(item => item.val),
                    type: 'line'
                }
            ]
        })
    }, [])
    return (
        <div style={{
            width: w ? w : '500px',
            height: h ? h : '500px',
            // border: '1px solid lightgray',
            padding: '10px',
            boxSizing: 'border-box'
        }} id={id}></div>
    )
}